<template>
  <view class="news-item">
    <view class="flex flex-row justify-between items-stretch py-2 box-border">
      <view class="left flex flex-col justify-between text-[29rpx]">
        <text class="news-title color-[#000000]">{{ newsTitle }}</text>
        <text class="news-time color-[#8A8A8A] mt-2">{{ newsTime }}</text>
      </view>
      <view class="right flex justify-center items-center">
        <image
          class="w-[195rpx] h-[120rpx]"
          :src="newsImg"
          mode="aspectFit"
        ></image>
      </view>
    </view>
    <view class="top-line"></view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  newsTitle: {
    type: String,
    default: "",
  },
  newsTime: {
    type: String,
    default: "",
  },
  newsImg: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.news-item {
  width: 100%;
  .left {
    width: calc(100% - 200rpx);
    .news-title {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
